import React, { useState } from "react";
import axios from "axios"
import Pubsub from "pubsub-js"
export default function Header() {
  const [headPortrait, setHeadPortrait] = useState('');

  const changePor = (e) => {
    setHeadPortrait(e.target.value)
  }
   
  const reqSend = async () => {
    Pubsub.publish("github", { isInit: false, isSearch: true, data: [] })
    const result = await axios.get("https://api.github.com/search/users?q=" + headPortrait);
    Pubsub.publish('github',{ isInit: false, isSearch: false, data: result.data.items })
  }
  return (
    <div>
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input type="text" value={headPortrait} onChange = {changePor} placeholder="enter the name you search" />
          &nbsp;<button onClick={reqSend}>Search</button>
        </div>
      </section>
    </div>
  );
}
